﻿.snippet {
    margin-bottom: 0.5rem;
    border: 1px solid #b6b6b6;
    border-radius: 4px;
}

.hljs {
    position: relative;
    -webkit-overflow-scrolling: touch;
    background-color: #f5f5f5 !important;
    color: #000;
    border-radius: 4px !important;
    font-family: Consolas, Courier, Courier New, monospace;
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow-x: auto;
    padding: 10px 12px !important;
}

.mdui-theme-layout-dark .hljs {
    background-color: #383838 !important;
    color: #cecece;
}

@media(prefers-color-scheme: dark) {
    .mdui-theme-layout-auto .hljs {
        background-color: #383838 !important;
        color: #cecece;
    }
}

::deep .hljs-copy-button {
    top: 0.5rem;
    right: 0.5rem;
    border-color: #c1c1c1;
    background-color: #e1e1e1;
    opacity: 0;
    transform: none;
    background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="rgb(38,38,38)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="rgb(38,38,38)"  /></svg>');
    transition: background-color,border-color 200ms ease, opacity 200ms ease-out
}

.mdui-theme-layout-dark .hljs-copy-wrapper ::deep .hljs-copy-button {
    border-color: #717171;
    background-color: #515151;
}

@media(prefers-color-scheme: dark) {
    .mdui-theme-layout-auto .hljs-copy-wrapper ::deep .hljs-copy-button {
        border-color: #717171;
        background-color: #515151;
    }
}

::deep .hljs-copy-button:hover {
    border-color: #c1c1c1;
}

.hljs-copy-wrapper:hover ::deep .hljs-copy-button,
::deep .hljs-copy-button:focus {
    opacity: 1
}

.mdui-theme-layout-dark .hljs ::deep .hljs-comment,
.mdui-theme-layout-dark .hljs ::deep .hljs-quote,
.mdui-theme-layout-dark .hljs ::deep .hljs-variable {
    color: green
}

@media(prefers-color-scheme: dark) {

    .mdui-theme-layout-auto .hljs ::deep .hljs-comment,
    .mdui-theme-layout-auto .hljs ::deep .hljs-quote,
    .mdui-theme-layout-auto .hljs ::deep .hljs-variable {
        color: green
    }
}

.mdui-theme-layout-dark .hljs ::deep .hljs-built_in,
.mdui-theme-layout-dark .hljs ::deep .hljs-keyword,
.mdui-theme-layout-dark .hljs ::deep .hljs-name,
.mdui-theme-layout-dark .hljs ::deep .hljs-selector-tag {
    color: #569cd6
}

@media(prefers-color-scheme: dark) {

    .mdui-theme-layout-auto .hljs ::deep .hljs-built_in,
    .mdui-theme-layout-auto .hljs ::deep .hljs-keyword,
    .mdui-theme-layout-auto .hljs ::deep .hljs-name,
    .mdui-theme-layout-auto .hljs ::deep .hljs-selector-tag {
        color: #569cd6
    }
}

.mdui-theme-layout-dark .hljs ::deep .hljs-meta,
.mdui-theme-layout-dark .hljs ::deep .hljs-meta .hljs-keyword,
.mdui-theme-layout-dark .hljs ::deep .hljs-tag {
    color: #9b9b9b;
}

@media(prefers-color-scheme: dark) {

    .mdui-theme-layout-auto .hljs ::deep .hljs-meta,
    .mdui-theme-layout-auto .hljs ::deep .hljs-meta .hljs-keyword,
    .mdui-theme-layout-auto .hljs ::deep .hljs-tag {
        color: #9b9b9b;
    }
}

.mdui-theme-layout-dark .hljs ::deep .hljs-addition,
.mdui-theme-layout-dark .hljs ::deep .hljs-attribute,
.mdui-theme-layout-dark .hljs ::deep .hljs-literal,
.mdui-theme-layout-dark .hljs ::deep .hljs-section,
.mdui-theme-layout-dark .hljs ::deep .hljs-string,
.mdui-theme-layout-dark .hljs ::deep .hljs-template-tag,
.mdui-theme-layout-dark .hljs ::deep .hljs-template-variable,
.mdui-theme-layout-dark .hljs ::deep .hljs-title,
.mdui-theme-layout-dark .hljs ::deep .hljs-type {
    color: #d69d85
}

@media(prefers-color-scheme: dark) {

    .mdui-theme-layout-auto .hljs ::deep .hljs-addition,
    .mdui-theme-layout-auto .hljs ::deep .hljs-attribute,
    .mdui-theme-layout-auto .hljs ::deep .hljs-literal,
    .mdui-theme-layout-auto .hljs ::deep .hljs-section,
    .mdui-theme-layout-auto .hljs ::deep .hljs-string,
    .mdui-theme-layout-auto .hljs ::deep .hljs-template-tag,
    .mdui-theme-layout-auto .hljs ::deep .hljs-template-variable,
    .mdui-theme-layout-auto .hljs ::deep .hljs-title,
    .mdui-theme-layout-auto .hljs ::deep .hljs-type {
        color: #d69d85
    }
}

.mdui-theme-layout-dark .hljs ::deep .hljs-deletion,
.mdui-theme-layout-dark .hljs ::deep .hljs-meta,
.mdui-theme-layout-dark .hljs ::deep .hljs-selector-attr,
.mdui-theme-layout-dark .hljs ::deep .hljs-selector-pseudo {
    color: #2b91af
}

@media(prefers-color-scheme: dark) {

    .mdui-theme-layout-auto .hljs ::deep .hljs-deletion,
    .mdui-theme-layout-auto .hljs ::deep .hljs-meta,
    .mdui-theme-layout-auto .hljs ::deep .hljs-selector-attr,
    .mdui-theme-layout-auto .hljs ::deep .hljs-selector-pseudo {
        color: #2b91af
    }
}

.mdui-theme-layout-dark .hljs ::deep .hljs-attr {
    color: #9cdcfe
}

@media(prefers-color-scheme: dark) {
    .mdui-theme-layout-auto .hljs ::deep .hljs-attr {
        color: #9cdcfe
    }
}